<template>
  <div class="achievement">
    <div class="achievement-nav" v-if="dhs_yj_goods_type == 2">
      <section :class="dateInfo.goodsType==1?'cur':''" @click="clickAchievementNav(1)">团队总业绩</section>
      <section :class="dateInfo.goodsType==2?'cur':''" @click="clickAchievementNav(2)">参与统计商品业绩</section>
    </div>
    <div class="achievement-header clearfix">
      <ul class="item fl">
        <li v-for="(item, index) in items"
            :key="index"
            @click="selectItem(item.code,item.type)">
          <span :class="[current == item.code ? 'cur' : '']">{{item.name}}</span>
        </li>
      </ul>
      <ul class="date fr"
          @click="showData">
        <li class="date_time" :class="info=='按条件查询'?'':'active'">
          <span>按条件查询</span>
          <i class="icon-right date-hide"></i>
        </li>
      </ul>
    </div>
    <div class="achievement-content">
      <ul class="lists">
        <li class="list">
          <span class="fl">订货商等级</span>
          <span class="fr">{{dhs_rank_name}}</span>
        </li>
        <li class="list">
          <span class="fl">团队业绩/佣金(元)</span>
          <span class="fr">{{total_commission}}</span>
        </li>
        <li class="list" v-if="dateInfo.goodsType == 1">
          <span class="fl">个人消费金额(元)</span>
          <span class="fr">{{personal_consume||'0.00'}}</span>
        </li>
        <li class="list" v-if="is_show_total_order">
          <span class="fl">团队订单(笔)</span>
          <span class="fr">{{total_orders||'0'}}</span>
        </li>
      </ul>
    </div>
    <date-pop @cancel="cancelTime"
              @confirm="selectTime"
              :current="current"
              :timeData="dateInfo"
              v-if="show_date"></date-pop>
  </div>
</template>

<script>
import Vue from 'vue'
import 'vant/lib/index.css'
import { Popup } from 'vant'
import datePop from '@/views/user/components/datePop'
import { getDhsYeJi } from '@/api/user/dhs/dhsApi'
import { lxmdhsYeJi } from '@/api/dz/lxmDzApi.js'
Vue.use(Popup)
export default Vue.extend({
  data() {
    return {
      dateInfo: {
        year: {},
        quarter: {},
        month: {},
        goodsType: 1
      },
      dhs_rank_name: null,
      total_commission: null,
      personal_consume: '',
      total_orders: '',
      is_show_total_order: '',
      items: [
        {
          name: '月',
          code: 1,
          type: 'month'
        },
        {
          name: '季度',
          code: 2,
          type: 'quarter'
        },
        {
          name: '年',
          code: 0,
          type: 'year'
        }
      ],
      current: 1,
      type: 'month',
      show_date: false,
      info: '',
      // 团队业绩tab
      dhs_yj_goods_type: 1,
      lxmdhsYeJi: 0
    }
  },
  created() {
    this.getTime()
    // console.log(this.$route.query.dhsYjGoodsType)
    if (this.$route.query.dhsYjGoodsType) {
      this.dhs_yj_goods_type = this.$route.query.dhsYjGoodsType
    }
    if (this.$route.query.lxmdhsYeJi && this.$route.query.lxmdhsYeJi == 1) {
      this.lxmdhsYeJi = this.$route.query.lxmdhsYeJi
      this.lxmInit()
      return
    }
    this.init()
  },
  methods: {
    // 点击tab
    clickAchievementNav(achievementType) {
      this.dateInfo.goodsType = achievementType
      if (this.lxmdhsYeJi == 1) {
        this.lxmInit()
        return
      }
      this.init()
    },
    lxmInit() {
      const value =
        this.current == 1
          ? this.dateInfo.currentMonth
          : this.current == 2
            ? this.dateInfo.currentQuarter
            : ''

      const data = {
        type: this.type,
        value,
        year: this.dateInfo.currentYear
      }
      if (this.dhs_yj_goods_type == 1) {
        data.goods_type = 0
      } else {
        data.goods_type = this.dateInfo.goodsType
      }
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)

      getDhsYeJi(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.dateInfo.year = res.data.year_list
          this.dateInfo.month = res.data.month
          this.dateInfo.quarter = res.data.quarter
          this.type = res.data.type
          this.dhs_rank_name = res.data.dhs_info[0].dhs_rank_name
          this.total_commission = res.data.dhs_info[0].total_commission
          this.personal_consume = res.data.personal_consume
          this.total_orders = res.data.total_orders
          this.is_show_total_order = res.data.is_show_total_order
        } else {
          this.$Error(res.msg)
        }
      })
    },
    init() {
      const value =
        this.current == 1
          ? this.dateInfo.currentMonth
          : this.current == 2
            ? this.dateInfo.currentQuarter
            : ''

      const data = {
        type: this.type,
        value,
        year: this.dateInfo.currentYear
      }
      if (this.dhs_yj_goods_type == 1) {
        data.goods_type = 0
      } else {
        data.goods_type = this.dateInfo.goodsType
      }
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)

      getDhsYeJi(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.dateInfo.year = res.data.year_list
          this.dateInfo.month = res.data.month
          this.dateInfo.quarter = res.data.quarter
          this.type = res.data.type
          this.dhs_rank_name = res.data.dhs_info[0].dhs_rank_name
          this.total_commission = res.data.dhs_info[0].total_commission
          this.personal_consume = res.data.personal_consume
          this.total_orders = res.data.total_orders
          this.is_show_total_order = res.data.is_show_total_order
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 获取当前年份、月份、季度
    getTime() {
      const time = new Date()
      const currentYear = time.getFullYear()
      const currentMonth = time.getMonth() + 1
      const currentQuarter = Math.ceil(currentMonth / 3)
      this.dateInfo.currentYear = currentYear
      this.dateInfo.currentMonth = currentMonth
      this.dateInfo.currentQuarter = currentQuarter
    },
    selectItem(code, type) {
      this.cancelTime()
      this.current = code
      this.type = type
      this.init()
    },
    showData() {
      this.show_date = true
    },
    selectTime(e) {
      this.dateInfo.currentYear = e.selectYear
      this.dateInfo.currentMonth = e.selectMonth
      this.dateInfo.currentQuarter = e.selectQuarter
      this.show_date = false
      this.init()
    },
    cancelTime() {
      this.show_date = false
    }
  },
  components: {
    datePop
  }
})
</script>

<style lang="scss">
@import "src/styles/variables";
@import "src/styles/mixin";
@import "src/styles/user/yejiStyle/index";
.achievement{
  .date {
    .date-hide {
      transform:translate(50%,-25%) rotateZ(45deg);
    }
  }
}
</style>
